<template>
  <div>
    <el-container v-if="seen">
        <el-aside style="width: 15%;">
			<el-menu class="el-menu-vertical-demo">
			  <el-menu-item index="1" @click="clickMenu(1)">
			    <template slot="title">
					<i class="el-icon-menu"></i>
			      <span slot="title">我的</span>
			    </template>
			  </el-menu-item>
			  <el-menu-item index="2" @click="clickMenu(2)">
			    <i class="el-icon-menu"></i>
			    <span slot="title">收藏</span>
			  </el-menu-item>
			  <el-menu-item index="3" @click="clickMenu(3)">
			    <i class="el-icon-setting"></i>
			    <span slot="title">使用情况</span>
			  </el-menu-item>
			</el-menu>
		</el-aside>
        <el-container>
          <el-main>
			  <MyApplication v-if="currentMenu == 1"></MyApplication>
		  </el-main>
        </el-container>
    </el-container>
	<!-- 手机端 -->
	<el-row v-if="!seen">
		<el-container>
		  <el-header>
			  <!-- <el-button size="medium" @click="drawer = true"  icon="el-icon-s-unfold"></el-button> -->
			  <el-row>
			  	<el-drawer
			  	  size="80%"
			  	  title="控制台"
			  	  :visible.sync="drawer"
			  	  direction="ltr"
			  	  :before-close="handleClose">
			  	  <div>
					  <el-menu class="el-menu-vertical-demo">
					    <el-menu-item index="1" @click="clickMenu(1)">
					      <template slot="title">
					  		<i class="el-icon-menu"></i>
					        <span slot="title">我的</span>
					      </template>
					    </el-menu-item>
					    <el-menu-item index="2" @click="clickMenu(2)">
					      <i class="el-icon-menu"></i>
					      <span slot="title">收藏</span>
					    </el-menu-item>
					    <el-menu-item index="3" @click="clickMenu(3)">
					      <i class="el-icon-setting"></i>
					      <span slot="title">使用情况</span>
					    </el-menu-item>
					  </el-menu>
				  </div>
			  	</el-drawer>
			  </el-row>
		  </el-header>
		  <el-main>
			  <MyApplication v-if="currentMenu == 1"></MyApplication>
		  </el-main>
		</el-container>
		
	</el-row>
	
  </div>
</template>
<script>
	import MyApplication from "./MyApplication.vue";
    export default {
        name: 'console',
		components: {
			MyApplication
		},
        data () {
            return {
				isCollapse: true,
				seen: true,
				drawer: false,
				scroll: '',
				currentMenu: 1
            }
        },
		 methods: {
			menuSeen(){
		      // 屏幕尺寸
		      let screenHeight=document.body.clientWidth;
		      if(screenHeight>415){
		          this.seen=true;
		      }else{
		          this.seen=false;
		      }
			},
			clickMenu(num){
			    switch (num){
			    	case 1:
						this.currentMenu = 1
						this.$store.state.isclickDrawer = false;
			    		break;
					case 2:
						this.currentMenu = 2
						this.$store.state.isclickDrawer = false;
						break;
					case 3:
						this.currentMenu = 3
						this.$store.state.isclickDrawer = false;
						break;
			    	
			    }
			},
			
			handleClose(done) {
			  done();
			  this.$store.state.isclickDrawer = false
			}
		},
		mounted() {
		    this.menuSeen()
		    this.$store.state.isOpenConsole = true;
		},
		destroyed(){
			this.$store.state.isOpenConsole = false;
		},
		computed: {
			listenClickDrawer() {
				return this.$store.state.isclickDrawer;
			}
		},
		watch: { //监听全局变量的变化
			listenClickDrawer: function(val, oldval) {
				this.drawer = val;
			},
		}
    }
</script>

<style scoped>
   
    
    .el-aside {
      /* background-color: #D3DCE6; */
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
      /* background-color: #E9EEF3; */
      color: #333;
      text-align: center;
      /* line-height: 160px; */
    }
    
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
	
	/* 菜单 */
	.el-menu-vertical-demo:not(.el-menu--collapse) {
	    min-height: 90vh;
	  }
	.el-menu-item {
		text-align: left;
	}
</style>